<template>
  <div>
    <h1>老有所依 | 养老院管理系统</h1>
    <img src="imgs/logo.png"  alt="">
    <h2>开始注册</h2>
    <el-card style="width: 500px;height: 400px;
    margin: 0 auto;background-color: rgba(255,255,255,0.3)">
      <!--label-width="55px" 让lable和文本框显示在一行之内-->
      <el-form label-width="80px" style="width: 400px;margin: 50px auto">
        <el-form-item label="用户名">
          <el-input type="text" v-model="user.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="user.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input style="width: 200px" type="text" v-model="user.phoneNum" placeholder="请输入手机号"></el-input>
          <el-button type="success" @click="code()">获取验证码</el-button>
        </el-form-item>

        <el-form-item label="验证码">
          <el-input type="text" v-model="user.code" placeholder="请输入获取的验证码"></el-input>
        </el-form-item>


        <el-form-item>
          <el-button type="info" onclick="window.location.href='/login'"
                     style="position:relative;right: 23px">返回登陆</el-button>

          <el-button type="warning" @click="reg()"
                     style="position:relative;right: 23px">提交信息</el-button>

        </el-form-item>

      </el-form>
    </el-card>
  </div>

</template>

<script>
export default {
  name: "RegView",
  data: function () {
    return {
      user:{username:"",password:"",phoneNum:"",code:""}
    }
  },
  methods:{
    reg(){
      axios.post("/reg",v.user).then(function (response){
        if(response.data ==1){
          v.$message("注册成功!");
          location.href="login.html";
        }else if(response.data==2){
          v.$message("用户已存在");
        }else {
          v.$message("验证码错误!");
        }
      })
    },
    code(){
      axios.get("/verificationCode?phoneNum="+v.user.phoneNum).then(function (){

      })
    }


  }

}
</script>

<style>
body{
  margin: 0;/*去掉自带的8个像素外边距*/
  background-image: url("../assets/index/bg.jpg");
  background-size: cover; /*设置背景为封面*/
  text-align: center;
}
h1{
  font-size: 36px;
  color: #E6A23C;
  margin-bottom: 0;/*去掉下外边距*/
}
img{
  width: 400px;
  margin:5px;
}
h2{
  font-size: 30px;
  color: #E6A23C;
  margin-bottom: 0;
}


</style>